<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
		<title>ToDoList—最简单的待办事项列表</title>
		<meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" />
		<link rel="stylesheet" href="index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<section>
					<form action="javascript:void(0)" id="form">
						<label for="title">ToDoList</label>
						<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" v-model="task" @keyup.enter="getTodoTaskList" />
					</form>
				</section>
			</header>
			<section>
				<h2 >正在进行 <span id="todocount" v-text="todoCount"></span></h2>
				<ol id="todolist" class="demo-box">
					<li draggable="true" v-for="item,index of todoTaskList" :key="index" >
						<input  type="checkbox"  @click.prevent="TodoTaskListClick(item,index)"  />
						<p  @click="editP(item,index,$event)">{{ item }}</p>
						<a @click="todoDelete(index)" href="javascript:void(0)">-</a>
					</li>
				</ol>
				<h2>已经完成 <span id="donecount" v-text="doneCount"></span></h2>
				<ul id="donelist">
					<li v-for="item,index of doneTaskList" :key="index" >
						<input type="checkbox" checked="checked" @click.prevent="DoneTaskListClick(item,index)" />
						<p @click="editP(item,index,$event)" v-show="isShow.pShow">{{item}}</p>
						<input v-model="doneTaskList[index]" value="" v-show="isShow.inputShouw" />
						<a @click="doneDelete(index)" href="javascript:void(0)">-</a>
					</li>
				</ul>
			</section>
			<footer>
				Copyright &copy; 2014 todolist.cn <a @click="clear" href="javascript:void(0);">clear</a>
			</footer>
		</div>
		
	</body>
</html>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			task:'',
			todoTaskList:[],
			doneTaskList:[],
			todoCount:0,
			doneCount:0,
			isShow:{
				pShow:true,
				inputShouw:false
			}
		},
		methods:{
			getTodoTaskList(){
				this.todoTaskList.push(this.task);
				this.todoCount=this.todoTaskList.length;
				this.task='';
			},
			TodoTaskListClick(item,index){
				this.doneTaskList.push(item);
				this.todoTaskList.splice(index,1);
				this.todoCount=this.todoTaskList.length;
				this.doneCount=this.doneTaskList.length;
			},
			DoneTaskListClick(item,index){
				this.todoTaskList.push(item);
				this.doneTaskList.splice(index,1);
				this.doneCount=this.doneTaskList.length;
				this.todoCount=this.todoTaskList.length;
			},
			editP(item,index,event){
				
				let p=event.currentTarget;	
				p.innerHTML="<input   id='input-"+index+"' value='"+item+"' />";
				let input = document.getElementById("input-"+index);
				input.setSelectionRange(0,input.value.length);
				input.focus();
				let that=this;
				input.onblur =function(){
					if(input.value.length == 0){
						p.innerHTML = item;
						alert("内容不能为空");
					}
					else{
						p.innerHTML=input.value;
						item=p.innerHTML;
						that.todoTaskList.splice(index,1);
						that.todoTaskList.push(item);
					}
				};
			},
			todoDelete(index){				
				this.todoTaskList.splice(index,1);
				this.todoCount=this.todoTaskList.length;					
			},
			doneDelete(index){
				this.doneTaskList.splice(index,1);
				this.doneCount=this.doneTaskList.length;
			},
			clear(){
				this.todoTaskList='';
				this.todoCount=0;
				this.doneTaskList='';
				this.doneCount=0;				
			}
		}
	});
</script>